<template>
  <div class="screen" :style="{background:autoTheme.bgColor}">
    <!-- 头部区域 -->
    <div class="head">
      <p class="title" :style="{color:autoTheme.titleColor}">农业数据实时监控系统</p>
      <img src="../../public/static/img/top02.png" class="logo" />
      <img class="switchThem" :src="autoTheme.img" @click="cTheme" />
    </div>
    <!-- 图标区域 -->
    <div class="container">
      <div class="left">
        <!-- 横向柱状图 -->
        <div :class="screenStatus.crosswise?'fullscreen':'crosswise'">
            <crosswise-comp ref="crosswise"></crosswise-comp>
          <div class="resize" @click="changeScreen('crosswise')">
            <span :class="[screenStatus.crosswise ?'iconfont icon-compress-alt':'iconfont icon-expand-alt']" :style="status"></span>
            <!-- icon-compress-alt 缩小  icon-expand-alt 放大  -->
          </div>
        </div>
        <!-- 纵向柱状图 -->
        <div :class="screenStatus.vertical?'fullscreen':'vertical'">
            <vertical-comp ref="vertical"></vertical-comp>
          <div class="resize" @click="changeScreen('vertical')">
              <span :class="screenStatus.vertical ?'iconfont icon-compress-alt':'iconfont icon-expand-alt'" :style="status"></span>
          </div>
        </div>
      </div>
      <div class="center" >
        <!-- 环状图 -->
        <div :class="screenStatus.annular?'fullscreen':'annular'">
              <huan-comp ref="annular"></huan-comp>
          <div class="resize" @click="changeScreen('annular')">
                        <span :class="screenStatus.annular ?'iconfont icon-compress-alt':'iconfont icon-expand-alt'" :style="status"></span>

          </div>
        </div>
        <!-- 地图 -->
        <div :class="screenStatus.map?'fullscreen':'map'">
            <map-comp ref="map"></map-comp>
          <div class="resize" @click="changeScreen('map')">
                        <span :class="screenStatus.map ?'iconfont icon-compress-alt':'iconfont icon-expand-alt'" :style="status"></span>

          </div>
        </div>
      </div>
      <div class="right">
        <!-- 折线图 -->
        <div  :class="screenStatus.broken?'fullscreen':'broken'">
              <broken-comp ref="broken"></broken-comp>
          <div class="resize" @click="changeScreen('broken')">
                <span :class="screenStatus.broken ?'iconfont icon-compress-alt':'iconfont icon-expand-alt'" :style="status"></span>
          </div>
        </div>
        <!-- 饼图 -->
        <div  :class="screenStatus.pie?'fullscreen':'pie'">
              <pie-comp ref="pie"></pie-comp>
          <div class="resize" @click="changeScreen('pie')">
              <span :class="screenStatus.pie ?'iconfont icon-compress-alt':'iconfont icon-expand-alt'" :style="status"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入6个图表组件
import crosswiseComp from '@/components/bar1.vue'
import verticalComp from '@/components/bar2.vue'
import huanComp from '@/components/huan.vue'
import mapComp from '@/components/map.vue'
import brokenComp from '@/components/line.vue'
import pieComp from '@/components/bing.vue'

import { mapState } from 'vuex'

export default {
  components: {
        crosswiseComp,
        verticalComp,
        huanComp,
        mapComp,
        brokenComp,
        pieComp
  },
  data() {
    return {
       // 初始化图表组件的默认样式状态  
            screenStatus:{
                crosswise:false,
                vertical:false,
                annular:false,
                map:false,
                broken:false,
                pie:false
            },
            status:{
              color:'white'
            }
    };
  },
  computed: {
    ...mapState(["autoTheme"])
  },
  watch: {

  },
  created() {

  },
  mounted() {

  },
  methods: {
    //切换主题
      cTheme(){
        this.$store.commit("changeTheme")
        this.status.color = "black"
      },
      //缩放图表
      changeScreen(type){
        //变量 使用中括号语法 同步当前图表容器大小
        this.screenStatus[type] = !this.screenStatus[type]
        // console.log(this.screenStatus[type]);
         // 调用图表的适配方法 改变容器大小的时候会触发回流和重绘制 render渲染树
        // 所以待本次dom渲染完毕后，再调用适配方法
        this.$nextTick(()=>{
          this.$refs[type].resize()
        })
      }
  },
};
</script>

<style>
.white{
  color:white
}
.black{
  color: black;
}
/*全屏样式的定义 */
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}

/* 大屏容器 */
.screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-image: url("../../public/static/img/bgc01.png");
}

/* 标题区域 */
.head {
  flex: 1;
  /* border: 2px solid blue; */
  margin-bottom: 0.1%;
  position: relative;
}
.head .title {
  text-align: center;
  color: #d96720;
  font-weight: bold;
  font-size: 25px;
  margin: 10px 0 0 0;
}
.head .logo {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
}
.head .switchThem {
  position: absolute;
  right: 4%;
  bottom: 70%;
  color: orange;
  font-size: 14px;
  width: 18px;
}

/* 图标区域 */
.container {
  flex: 8;
  display: flex;
  justify-content: space-around;
}

/* 左侧视图区域 */
.container .left {
  /* flex: 3; */
  /* border: 1px solid red; */
  width: 28%;
  height: 100%;
  margin-left: 0.5%;
  display: flex;
  flex-direction: column;
}
.left .crosswise {
  flex: 3;
  /* border: 1px solid purple; */
  margin-bottom: 8%;
}
.left .vertical {
  flex: 2.5;
  /* border: 1px solid brown; */
}

/* 中间视图区域 */
.container .center {
  /* flex: 5; */
  /* border: 1px solid green; */
  width: 40%;
  height: 100%;
  margin: 0 2%;
  display: flex;
  flex-direction: column;
}
.center .annular {
  flex: 1;
  /* border: 1px solid palegreen; */
  margin-bottom: 3%;
}
.center .map {
  flex: 4;
  width: 100%;
  /* border:  1px solid red; */
}

/* 右侧视图区域 */
.container .right {
  /* flex: 3; */
  /* border: 1px solid orange; */
  width: 28%;
  height: 100%;
  margin-right: 0.5%;
  display: flex;
  flex-direction: column;
}
.right .broken {
  flex: 1;
  /* border: 1px solid palevioletred; */
  margin-bottom: 6%;
}
.right .pie {
  flex: 1;
  /* border: 1px solid olive; */
}

.crosswise,
.vertical,
.annular,
.map,
.broken,
.pie {
  position: relative;
}

/* 缩放标记样式 */
.resize {
  position: absolute;
  right: 16px;
  top: 16px;
  cursor: pointer;
  color: white;
}

</style>
